@import "variables";
@import "mixins";

$font-family-base: "Metropolis-Light", helvetica, sans-serif;
$metropolis-light: $font-family-base;
$metropolis-light-italic: "Metropolis-LightItalic", helvetica, sans-serif;
$metropolis-regular: "Metropolis-Regular", helvetica, sans-serif;
$metropolis-regular-italic: "Metropolis-RegularItalic", helvetica, sans-serif;
$metropolis-medium: "Metropolis-Medium", helvetica, sans-serif;
$metropolis-medium-italic: "Metropolis-MediumItalic", helvetica, sans-serif;
$metropolis-bold: "Metropolis-Bold", helvetica, sans-serif;
$metropolis-bold-italic: "Metropolis-BoldItalic", helvetica, sans-serif;
$metropolis-semibold: "Metropolis-SemiBold", helvetica, sans-serif;
$metropolis-semibold-italic: "Metropolis-SemiBoldItalic", helvetica, sans-serif;

body {
  margin: 0;
  font-family: $font-family-base;
  line-height: 1.25;
}

.wrapper {
  max-width: 980px;
  padding: 20px;
  margin: 0 auto;

  @include breakpoint(small) {
    max-width: 100%;
  }

  @include breakpoint(medium) {
  }

  &.docs {
    @include breakpoint(extra-large) {
      max-width: 80%;
    }
  }
}

.clearfix {
  *zoom: 1;

  &::before,
  &::after {
    display: table;
    content: "";
    line-height: 0;
  }

  &::after {
    clear: both;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
}

h1 {
  font-size: 28px;
}

h2 {
  color: $darkgrey;
  font-size: 22px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

li {
  display: inline;
  padding-right: 25px;
  font-size: 14px;
  line-height: 1.7em;
  list-style-type: none;

  &:last-of-type {
    padding-right: 0;
  }
}

p {
  color: $darkgrey;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7em;

  &.intro {
    font-size: 18px;
  }
}

a {
  color: $indigo;
  font-family: $metropolis-medium;
  font-size: 16px;
  text-decoration: none;
}

button {
  border: none;
  background-color: unset;
}

.button {
  min-width: 200px;
  padding: 14px 10px;
  border: 1px solid $white;
  border-radius: 3px;
  background-color: $white;
  color: $indigo;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;

  &.secondary {
    background-color: $indigo;
    color: $white;
  }

  &.tertiary {
    border: 1px solid $indigo;
  }
}

.buttons {
  margin-top: 40px;

  .button:first-of-type {
    margin-right: 30px;

    @include breakpoint(small) {
      margin: 0 0 20px;
    }
  }
}

.strong {
  font-family: $metropolis-medium;
}

.bg-grey {
  background-color: $lightgrey;
}

.grid.three {
  display: grid;
  column-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 1em;

  @include breakpoint(small) {
    grid-template-columns: 1fr;
  }
}

.grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @include breakpoint(small) {
    grid-template-columns: 1fr;
  }
}

.rounded-circle {
  border-radius: 50% !important;
}

table > caption {
  margin-bottom: 1em;
}

noscript {
  display: block;
  padding: 10px;
  margin: 0 20px 20px 0;
  background-color: rgba(red, 0.25);
  font-size: 14px;
  font-weight: bold;
}

// Metropolis
@font-face {
  font-family: Metropolis-Bold;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-Bold.eot");
  src: url("/fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-Bold.woff2") format("woff2"),
    url("/fonts/Metropolis-Bold.woff") format("woff");
}

@font-face {
  font-family: Metropolis-BoldItalic;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-BoldItalic.eot");
  src: url("/fonts/Metropolis-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-BoldItalic.woff2") format("woff2"),
    url("/fonts/Metropolis-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: Metropolis-Light;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-Light.eot");
  src: url("/fonts/Metropolis-Light.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-Light.woff2") format("woff2"),
    url("/fonts/Metropolis-Light.woff") format("woff");
}

@font-face {
  font-family: Metropolis-LightItalic;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-LightItalic.eot");
  src: url("/fonts/Metropolis-LightItalic.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-LightItalic.woff2") format("woff2"),
    url("/fonts/Metropolis-LightItalic.woff") format("woff");
}

@font-face {
  font-family: Metropolis-Regular;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-Regular.eot");
  src: url("/fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-Regular.woff2") format("woff2"),
    url("/fonts/Metropolis-Regular.woff") format("woff");
}

@font-face {
  font-family: Metropolis-RegularItalic;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-RegularItalic.eot");
  src: url("/fonts/Metropolis-RegularItalic.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-RegularItalic.woff2") format("woff2"),
    url("/fonts/Metropolis-RegularItalic.woff") format("woff");
}

@font-face {
  font-family: Metropolis-Medium;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-Medium.eot");
  src: url("/fonts/Metropolis-Medium.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-Medium.woff2") format("woff2"),
    url("/fonts/Metropolis-Medium.woff") format("woff");
}

@font-face {
  font-family: Metropolis-MediumItalic;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-MediumItalic.eot");
  src: url("/fonts/Metropolis-MediumItalic.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-MediumItalic.woff2") format("woff2"),
    url("/fonts/Metropolis-MediumItalic.woff") format("woff");
}

@font-face {
  font-family: Metropolis-SemiBold;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-SemiBold.eot");
  src: url("/fonts/Metropolis-SemiBold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-SemiBold.woff2") format("woff2"),
    url("/fonts/Metropolis-SemiBold.woff") format("woff");
}

@font-face {
  font-family: Metropolis-SemiBoldItalic;
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/Metropolis-SemiBoldItalic.eot");
  src: url("/fonts/Metropolis-SemiBoldItalic.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Metropolis-SemiBoldItalic.woff2") format("woff2"),
    url("/fonts/Metropolis-SemiBoldItalic.woff") format("woff");
}
